<!-- 秒杀页面 -->
<template>
  <div class="skill-page">
    <div class="flex-sp">
      <div class="flex">
        <img :src="imgUrl1" alt="" class="special" />
        <div class="skill-ountdown">
          <span class="skill-circle">{{ hours }}</span>
          <span>:</span>
          <span class="skill-circle">{{ mins }}</span>
          <span>:</span>
          <span class="skill-circle">{{ senc }}</span>
        </div>
      </div>
      <div>
        <span>更多</span>
        <i class="iconfont icon-jiantou2"></i>
      </div>
    </div>
    <!-- 商品展示 -->
    <div class="skill-flex">
      <div class="shop-box">
        <img src="../../../../images/ms1.jpg" alt="" />
        <div class="shop-desc">
          艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏
        </div>
        <div class="shop-price">99.00</div>
        <div class="make-price">960.00</div>
      </div>
      <div class="shop-box">
        <img src="../../../../images/ms2.jpg" alt="" />
        <div class="shop-desc">
          途牛名龙堂i7 6700升7700 GTX1060 6G台式电脑主机DIY游戏组装整机 升6GB独显 送正版WIN10 一年上门
        </div>
        <div class="shop-price">99.00</div>
        <div class="make-price">1999.00</div>
      </div>
      <div class="shop-box">
        <img src="../../../../images/ms3.jpg" alt="" />
        <div class="shop-desc">
          哥弟秋季新款男士套头卫衣印花外套韩版简约百搭潮流男生上衣服
        </div>
        <div class="shop-price">7700.00</div>
        <div class="make-price">144.00</div>
      </div>
      <div class="shop-box">
        <img src="../../../../images/ms1.jpg" alt="" />
        <div class="shop-desc">
          苹果 27” Retina 5K显示屏 iMac:3.3GHz处理器2TB存储
        </div>
        <div class="shop-price">99.00</div>
        <div class="make-price">1999.00</div>
      </div>
      <div class="shop-box">
        <img src="../../../../images/ms2.jpg" alt="" />
        <div class="shop-desc">
          小米三星C24F396FH曲面显示器23.5英寸电脑显示器24液晶显示屏幕超22
        </div>
        <div class="shop-price">99.00</div>
        <div class="make-price">1999.00</div>
      </div>
      <div class="shop-box">
        <img src="../../../../images/ms3.jpg" alt="" />
        <div class="shop-desc">
          帮宝适新品HYC 2k显示器32寸电脑显示器无边框HDMI液晶显示器IPS显示屏 2K高清屏IPS 超薄 厚6mm 无边框
        </div>
        <div class="shop-price">99.00</div>
        <div class="make-price">1999.00</div>
      </div>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import imgUrl1 from "@/assets/177_P_1597978468241.png";

import axios from "axios";
//https://x.dscmall.cn/api/goods/type_list?page=1&size=10

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      skillList: [],
      imgUrl1: imgUrl1,
      hours: "00",
      mins: "00",
      senc: "00",
      timer: "timer",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skill() {
      let nowDate = new Date(); //获取当前时间
      let targetDate = new Date("2022-6-30 23:59:59"); //目标时间
      let time = (targetDate - nowDate) / 1000;
      //小时
      this.hours = Math.floor(time / 60 / 60);
      if (this.hours <= 9 && this.hours > 0) {
        this.hours = "0" + this.hours;
      }
      //分钟
      this.mins = Math.floor((time % 3600) / 60);
      if (this.mins <= 9 && this.mins > 0) {
        this.mins = "0" + this.mins;
      }
      //秒
      this.senc = Math.floor(time % 60);
      if (this.senc <= 9 && this.senc > 0) {
        this.senc = "0" + this.senc;
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    /* axios
      .get("/goods/type_list?page=1&size=10")
      .then((res) => console.log(res.data)); */
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.timer = setInterval(this.skill, 1000);
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    clearInterval(this.timer);
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.skill-page {
  padding: 0 1rem;
  .flex-sp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .flex {
      display: flex;
      margin-top: 1rem;
      .skill-ountdown {
        margin-left: 1rem;
        span {
          font-weight: 600;
        }
        .skill-circle {
          margin-left: 0.5rem;
          display: inline-block;
          width: 3rem;
          height: 2rem;
          border-radius: 2rem;
          background-color: #666;
          line-height: 2rem;
          text-align: center;
          color: white;
        }
      }
    }
    .special {
      width: 7rem;
      height: 1.5rem;
    }
  }
  .skill-flex {
    display: flex;
    overflow: auto;
    margin-top: 1rem;
    &::-webkit-scrollbar {
      display: none;
    }
    .shop-box {
      width: 10rem;
      margin-left: 1rem;
      margin-top: 1rem;
      img {
        width: 10rem;
        height: 10rem;
      }
      .shop-desc {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .shop-price {
        color: red;
        text-align: center;
        font-weight: bold;
        &::before {
          content: "￥";
        }
      }
      .make-price {
        color: #666;
        text-decoration: line-through;
        text-align: center;
        &::before {
          content: "￥";
        }
      }
    }
  }
}
</style>